<template>
  <div>
    <el-form ref="form" :model="rechargeForm" label-width="85px">
      <!-- <el-form-item label="会员手机:" prop="memberId" required>
           <el-input v-model="form.memberId" placeholder="请输入会员手机" />
       </el-form-item>
       <el-form-item label="会员姓名:" prop="phone">
           <el-input v-model="form.phone" placeholder="请输入会员姓名" />
       </el-form-item>
       <el-form-item label="储值余额:" prop="name">
           <el-input v-model="form.name" placeholder="请输入储值余额" />
       </el-form-item>-->
      <el-form-item label="充值方案:" prop="rechargefa">
        <el-select v-model="rechargeForm.rechargefa" filterable @change="savefa" placeholder="请选择请充值方案" style="width: 100%">
          <el-option
            v-for="dict in recharge"
            :key="dict.id"
            :label="dict.desc"
            :value="dict.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="充值额度:" prop="rechargeMoney1">
        <el-input v-model="rechargeForm.rechargeMoney1" :disabled="flag" type="number" placeholder="请输入充值额度"/>
      </el-form-item>
      <el-form-item label="赠送金额:" prop="money">
        <el-input v-model="rechargeForm.money" :disabled="flag" type="number" placeholder="请输入赠送金额"/>
      </el-form-item>
      <el-form-item label="备注:" prop="remark">
        <el-input v-model="rechargeForm.remark" type="textarea" placeholder="请输入备注"/>
      </el-form-item>
      <el-form-item label="支付方式:" prop="remark" required class="way">
        <span>{{index===2?'现金支付':'线上支付'}}</span>
        <p>
          <img src="@/assets/image/money.png" alt="" @click="change(2)" :class="index===2?'on':''">
          <img src="@/assets/image/saoma.png" alt="" @click="change(1)" :class="index===1?'on':''">
        </p>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitOnlyForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import {listAllMoney, memberRecharge} from "@/api/mahjong/exchange";


  export default {
    name: "",
    props: {
      details: {}
    },
    data() {
      return {
        flag: false,
        rechargeForm: {
          payType: 2,

        },
        recharge: [],
        index: 2
      }
    },
    created() {
      this.rechargeForm.memberId = this.details.id;
      this.initSearch();

    },
    methods: {
      savefa() {
        if (this.rechargeForm.rechargefa === -1) {
          this.flag = false;
        } else {
          this.flag = true;
          const results = this.recharge.find(item => item.id == this.rechargeForm.rechargefa);
          console.log(results);
          this.rechargeForm.rechargeMoney1 = results.rechargeMoney;
          this.rechargeForm.money = results.money;
        }
      },
      initSearch() {
        listAllMoney().then(response => {
          this.recharge = response.data;
          this.recharge.forEach((element, index) => {
            element.desc = "充" + element.rechargeMoney + "送" + element.money
          })
          let param = {};
         param.id = -1;
          param.desc = "自定义";
          this.recharge.push(param);
        });
      },
      cancel() {
        this.$emit('update:close', false)
      },
      submitOnlyForm() {
        console.log(this.rechargeForm);
        this.rechargeForm.memberId = this.details.id;
        this.rechargeForm.rechargeMoney=this.rechargeForm.rechargeMoney1;
        memberRecharge(this.rechargeForm).then(response => {
          if (response.code == 200) {
            this.$message({
              message: '充值成功，账户余额' + response.data.money,
              type: 'success'
            });
            this.rechargeForm={};
            this.flag=false;
            this.$emit('update:close', false)
            this.$emit('gocz')
          }
        })
      },
      change(e) {
        if (this.index === e || e === undefined) {
          return false;
        } else {
          this.index = e;
        }
        this.rechargeForm.payType = this.index;
      }
    }
  };
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  .dialog-footer {
    text-align: right;
  }

  .way {
    span {
      color: #DE2E2E;
    }
  }

  .on {
    border: 1px solid #26CE41;
  }

  img {
    margin-right: 40px;
  }
</style>
